<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>欢迎来到提交页面!</title>
  <script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat;
      background-size: 100% 130%;
    }

    #login_box {
      width: 50%;
      height: 500px;
      background-color: #00000060;
      margin: auto;
      margin-top: 10%;
      text-align: center;
      border-radius: 10px;
      padding: 50px 50px;
    }

    h2 {
      color: #ffffff;
      margin-top: 5%;
    }

    #input-box {
      margin-top: 5%;
    }

    span {
      color: #fff;
    }

    input {
      border: 0;
      width: 60%;
      font-size: 15px;
      color: #fff;
      background: transparent;
      border-bottom: 2px solid #fff;
      padding: 5px 10px;
      outline: none;
      margin-top: 10px;
    }

    .btn {
      margin-top: 50px;
      width: 60%;
      height: 30px;
      border-radius: 10px;
      border: 0;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
      background-image: linear-gradient(to right, #30cfd0, #330867);
    }

    .calculator {
      margin-top: 50px;
      width: 10%;
      height: 30px;
      border-radius: 10px;
      border: 0;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
      background-image: linear-gradient(to right, #30cfd0, #330867);
    }

    #sign_up {
      margin-top: 45%;
      margin-left: 60%;
    }

    a {
      color: #b94648;
    }
  </style>
  <style>
    .span-style{
      margin-left:20px;
      border:none;
    }
    label{
      position: absolute;
      display: inline-block;
      border: 1px solid #ffffff;
      width:13px;
      height:13px;
      border-radius: 3px;

    }
    label input[type="checkbox"] {
                appearance: none;
                -webkit-appearance: none;
                outline: none;
                margin: 0;
            }
    label input[type="checkbox"]:after {
      display: inline-block;
      position: absolute;
      content:"";
      background-color: transparent;
    }
     label input[type="checkbox"]:checked:after {
      //content:"\2714";
      //text-align: center;
      font-weight:bold;
      font-size:13px;
      font-family:Sans-serif;
      background: transparent;
      top: -3px;
      left: 3px;
      content:"L";
      transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
        -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
    }
    </style>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .numBox {
            display: flex;
        }
    </style>
</head>

<body>
  <div id="login_box">
    <h2>记录数据</h2>
  <form>
      <div id="input_box">
      <input cls_id="cls_id" placeholder="您的班级">
    </div>
    <div class="input_box">
      <input inspector="inspector" placeholder="您的检察员id">
    </div>
    <div style ="margin-top: 10px;margin-left: 1px;">
    <div>班级量化</div>
        <div>
            <div class="box"></div>
            <div class="zjbox"></div>
        </div>
    </div>
    <div style ="margin-top: 10px;margin-left: 1px;">
    <div>宿舍量化</div>
        <div>
            <div class="box"></div>
            <div class="zjbox"></div>
        </div>
    </div>
    <div style ="margin-top: 10px;margin-left: 1px;">
    <div>个人量化</div>
        <div>
            <div class="box"></div>
            <div class="zjbox"></div>
        </div>
    </div>
    <div style ="margin-top: 10px;margin-left: 1px;">
    <div>楼值量化</div>
        <div>
            <div class="box"></div>
            <div class="zjbox"></div>
        </div>
    </div>
    <div style ="margin-top: 10px;margin-left: 1px;">
    <div>课堂纪律量化</div>
        <div>
            <div class="box"></div>
            <div class="zjbox"></div>
        </div>
    </div>
    <button class="btn">提交</button><br>
  </form>

  </div>
</body>
<script>
    let arr = [
        { id: 1, name: "纸屑", num: 0,price:1,dzj:0 },
        { id: 2, name: "黑板", num: 0,price:1,dzj:0 },
        { id: 3, name: "其他", num: 0,price:1,dzj:0 },
<!--        { id: 4, name: "床铺", num: 0,price:1,dzj:0 },-->
<!--        { id: 5, name: "衣物叠放", num: 0,price:1,dzj:0 },-->
<!--        { id: 6, name: "其他", num: 0,price:1,dzj:0 },-->
<!--        { id: 7, name: "指甲", num: 0,price:1,dzj:0 },-->
<!--        { id: 8, name: "头发", num: 0,price:1,dzj:0 },-->
<!--        { id: 9, name: "其他", num: 0,price:1,dzj:0 },-->
<!--        { id: 10, name: "上课打闹", num: 0,price:1,dzj:0 },-->
<!--        { id: 11, name: "玩手机", num: 0,price:1,dzj:0 },-->
<!--        { id: 12, name: "其他", num: 0,price:1,dzj:0 }-->
    ];
    htmlFn(arr);
    function add(data) {
        arr.map((item) => {
            if (item.id == data) {
                item.num++;
            }
        })
        htmlFn(arr);
    }
    function reduce(data) {
        arr.map((item) => {
            if (item.id == data) {
                if (item.num == 0) { //防止 数量 为负数
                    return
                }
                item.num--;
            }
        })
        htmlFn(arr);
    }



    function htmlFn(arr) {
        let boxHtml = "";
        let zj=0; //所有商品总价
        for (var i = 0; i < arr.length; i++) {

            let dzj=arr[i].num*arr[i].price; //单个商品总价
            zj+=dzj;
            arr[i].dzj=dzj;
            boxHtml += `
           <div>
             <span>扣分项：${arr[i].name}</span>
             <span>扣分额度：${arr[i].price}</span>
             <div class="numBox">
                数量：
                <button class="calculator" onclick='reduce(${arr[i].id})' >-</button>
                <input class="score_input" value=${arr[i].num} type="number"/>
                <button class="calculator" onclick='add(${arr[i].id})'>+</button>
             </div>
            </div>
        `
        };

        let boxs = document.getElementsByClassName("box");//list, array
        let zjboxs=document.getElementsByClassName("zjbox");

        Array.prototype.forEach.call(boxs, function (box){
            box.innerHTML = boxHtml;
        })
        Array.prototype.forEach.call(zjboxs, function (zjbox) {
            zjbox.innerText= "减分总和："+zj;
        })

        get_score();
    }

    function get_score1(){
        sum_score = 0;
        let score_inputs=document.getElementsByClassName("score_input");
        Array.prototype.forEach.call(score_inputs, function (s) {
            console.log(s.value);
            sum_score += parseInt(s.value);
        })
    }

    function get_score(){
        var inputElements = document.querySelectorAll("input[type=number]");

        for (var i=0; i < inputElements.length; i++) {
            inputElements[i].addEventListener("input", updateTotalScore(inputElements, i));
        }
    }

    function updateTotalScore(inputElements, i){
        var total_score = 0;
        for (var j=0; j<inputElements.length; j++){
            total_score += parseInt(inputElements[i].value);
        }
        console.log(total_score);
    }
</script>
</html>